<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">用户列表</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>

    <el-form :model="form" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="MALE" />
          <el-option label="女" value="FEMALE" />
          <el-option label="无选择" :value="null" />
        </el-select>
      </el-form-item>
      <el-form-item label="只显示未处理">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">查询</el-button>
        <el-button  @click="resetClick">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">查询结果</el-divider>

    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"

        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="80" />
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="username" label="用户名" width="220" />
      <el-table-column prop="password" label="密码" width="220" />
      <el-table-column prop="name" label="姓名" width="220" />
      <el-table-column prop="phone" label="电话" width="220" />
      <el-table-column prop="status" label="状态" width="220" /> <!-- 之后添加是否审核 -->
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
              link
              type="primary"
              size="big"
              @click.prevent="detail(scope.$index)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
    <el-pagination
                   :background=true
                   v-model:total="totalCount"
                   v-model:page-size="form.pageSize"
                   :small=false
                   :page-sizes="[5, 10, 20, 50]"
                   @size-change="handleSizeChange"
                   layout="sizes, prev, pager, next, jumper"
                   @current-change="changePageNumber" />
    </div>
    <div class="demo-pagination-block" style="margin-top: 20px">
      <el-button type="primary" @click="clickAdd">新增用户...</el-button>
      <el-button type="danger" :disabled="delete_list.length === 0
" @click="clickDelete">删除已选</el-button>
    </div>



    <!--  消息对话框    -->

    <el-dialog v-model="dialogFormVisible" title="添加用户">
      <el-form :model="addForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="addForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="addForm.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="addForm.sex" placeholder="请选择性别">
            <el-option label="男" value="MALE" />
            <el-option label="女" value="FEMALE" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="addForm.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmClickAdd"
            :disabled= "addForm.name==='' || addForm.username==='' || addForm.phone==='' ||
                         addForm.password==='' || addForm.sex===null">
          确认添加
        </el-button>
      </span>
      </template>
    </el-dialog>

  </el-card>

</template>

<script setup>
import store from "@/store";
import {onMounted, reactive, ref} from "vue";
import {add, page, remove, searchPage} from "@/api/user";
import router from "@/router";

const tableData = ref([]); // table数据

const delete_list = ref([]); // 需要删除的id列表

const dialogFormVisible = ref(false); // 添加弹出框的显示与否

const formLabelWidth = '100px'

// 查询表单
const form = reactive({
  username: "",
  name: "",
  sex: null,
  phone: "",
  delivery: false,
  password: "",
  pageNum: 1,
  pageSize: 5
});

// 添加表单
const addForm = reactive({
  username: "",
  name: "",
  sex: null,
  phone: "",
  delivery: false,
  password: "",
  pageNum: 1,
  pageSize: 5
});


// 进入详情页修改信息
const detail = (index) => {
  const item = reactive(tableData.value[index]);
  console.log(item.id);
  router.push({
    name: 'detail',
    params: {
      id: item.id,
    }});
}

const confirmClickAdd = () => {
  dialogFormVisible.value = false;
  add(addForm).then(() => {
    myPage();
  });
}

const clickAdd = () => {
  dialogFormVisible.value = true;
}

const tableRowClassName = ({row, rowIndex}) => {
    if (rowIndex % 4 === 0) {
      return 'warning-row';
    } else if (rowIndex % 4 === 2) {
      return 'success-row';
    }
    return '';
}


const handleSelectionChange = (selection) => {
  delete_list.value = selection;
}

const clickDelete = () => {
  const id_array = reactive([]);
  for(let item in delete_list.value) {
    id_array.push(delete_list.value[item].id);
  }
  remove(id_array).then(() => {
    myPage();
  });
}


const totalCount = ref(10);


const searchClick = () => {
  myPage();
};

const resetClick = () => {
  form.sex = null;
  form.pageNum = 1;
  form.name = "";
  form.username = "";
  form.phone = "";
  form.pageSize = 5;
  myPage();
}

const changePageNumber = (pageNum) => {
  form.pageNum = pageNum;
  myPage();
}

onMounted(() => {
  myPage();
});

const myPage = () => {
  searchPage(form).then((res) => {
    tableData.value = res.data.list;
    totalCount.value = res.data.total;
  });
}

const handleSizeChange = () => {
  myPage();
}

</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-table >>> .warning-row {
  background: oldlace;
}
.el-table >>> .success-row {
  background: #f0f9eb;
}
</style>
